<script setup lang="ts">
	import { ref, unref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { route } from '@/uni_modules/uview-plus'
	import { useNotify } from '@/hooks/web/useNotify/index.js'
	import { payBalance } from '@/package_saleman/api/Home'

	// 消息弹窗
	const NotifyRef = ref<any>(null)
	const { showNotify } = useNotify(NotifyRef)

	interface RouteParams {
		id : string,
		name : string,
		balance : string
	}
	const routeParams = ref<RouteParams>({
		id: '',
		name: '',
		balance: ''
	})
	onLoad((options) => {
		routeParams.value = options as RouteParams
	})
	const money = ref('')
	const pay_type = ref('')

	const submitLoading = ref(false)
	const submit = async () => {
		if (!money.value) {
			showNotify({
				type: 'error',
				message: '请填写金额'
			})
			return false
		}
		if (!pay_type.value) {
			showNotify({
				type: 'error',
				message: '请选择收款方式'
			})
			return false
		}
		submitLoading.value = true
		try {
			const params = {
				store_id: unref(routeParams).id,
				money: money.value,
				pay_type: pay_type.value,
			}
			const res = await payBalance(params)
			showNotify({
				type: 'success',
				message: res.msg
			})
			setTimeout(() => {
				uni.reLaunch({
					url: `/package_saleman/paymentPages/Home/index`
				})
			}, 1000)
		} catch (err) {
			showNotify({
				type: 'error',
				message: err.msg
			})
		} finally {
			submitLoading.value = false
		}

	}
</script>

<template>
	<view class="content">
		<view class="content-header">
			<view class="header-name">{{routeParams.name}}</view>
			<view class="header-text">预付余额：<text
					style="font-weight: 700;color: rgba(245, 99, 81, 1);">{{routeParams.balance}}</text>
			</view>
		</view>
		<view class="content-main">
			<view class="main-header">充值金额</view>
			<view class="header-input">
				<up-input v-model="money" :customStyle="{backgroundColor: '#f0f0f0', padding: '20rpx'}"
					placeholder="请输入金额" border="none"></up-input>
			</view>
			<view class="content-payment">
				<view class="payment-header">
					<view class="payment-name">收款方式</view>
				</view>
				<view class="payment-box">
					<up-radio-group v-model="pay_type" placement="column" iconPlacement="right">
						<up-radio :customStyle="{marginBottom: '8px'}" name="1" label="现金">
						</up-radio>
						<up-radio :customStyle="{marginBottom: '8px'}" name="2" label="公司账户">
						</up-radio>
					</up-radio-group>
				</view>
			</view>
			<view class="main-footer">
				<up-button text="充值" :loading="submitLoading" :disabled="submitLoading" @click="submit()"
					color="rgba(55, 131, 252, 1)"></up-button>
			</view>
		</view>
		<up-notify ref="NotifyRef"></up-notify>
	</view>
</template>


<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		background: rgba(242, 243, 245, 1);
		padding-top: 30rpx;
		box-sizing: border-box;

		.content-header {
			width: 702rpx;
			height: 138rpx;
			border-radius: 12rpx;
			background: rgba(255, 255, 255, 1);
			margin: 0rpx auto;
			padding: 30rpx;
			box-sizing: border-box;

			.header-name {
				font-size: 28rpx;
				font-weight: 700;
				color: rgba(2, 14, 36, 1);
			}

			.header-text {
				display: inline-block;
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(101, 103, 105, 1);
				margin-top: 20rpx;
				margin-right: 40rpx;
			}
		}

		.content-main {
			width: 750rpx;
			height: calc(100vh - 118rpx);
			background: rgba(255, 255, 255, 1);
			margin-top: 40rpx;
			padding: 30rpx;
			box-sizing: border-box;

			.main-header {
				font-size: 28rpx;
				font-weight: 700;
				color: rgba(2, 14, 36, 1);
			}

			.header-input {
				width: 702rpx;
				height: 80rpx;
				border-radius: 12rpx;
				background: rgba(242, 243, 245, 1);
				margin-top: 40rpx;
			}

			.content-payment {
				margin-top: 40rpx;

				.payment-header {
					display: flex;
					justify-content: space-between;

					.payment-name {
						font-size: 28rpx;
						font-weight: 700;
						color: rgba(36, 34, 34, 1);
					}
				}

				.payment-box {
					width: 100%;
					margin-top: 40rpx;

					.box-name {
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(2, 14, 36, 1);
						margin-bottom: 10rpx;
					}

					.payment-line {
						width: 700rpx;
						height: 2rpx;
						background: rgba(240, 240, 240, 1);
						margin: 20rpx auto;
					}
				}
			}


			.main-footer {
				position: fixed;
				bottom: 80rpx;
				width: 702rpx;

			}
		}
	}
</style>